import QueryFilter from "@/components/QueryFilter"
import useAntdList from "@/hooks/useAntdList"
import { queryAccount } from "@/service/globalSetting"
import { Card, Form, Radio, Table } from "antd"
import { Bar } from '@ant-design/plots';
import { useRequest } from "ahooks";
import { queryPerf } from "@/service/monitor";
import { useState } from "react";

const App = () => {
  // const [value,setValue] = useState('all');
  const { data = [], run,loading } = useRequest(queryPerf)
  console.log('datadata', data)
  // const data = [
  //     {
  //       type: '家具家电',
  //       sales: 38,
  //     },
  //     {
  //       type: '粮油副食',
  //       sales: 52,
  //     },
  //     {
  //       type: '生鲜水果',
  //       sales: 61,
  //     },
  //     {
  //       type: '美容洗护',
  //       sales: 145,
  //     },
  //     {
  //       type: '母婴用品',
  //       sales: 48,
  //     },
  //     {
  //       type: '进口食品',
  //       sales: 38,
  //     },
  //     {
  //       type: '食品饮料',
  //       sales: 38,
  //     },
  //     {
  //       type: '家庭清洁',
  //       sales: 38,
  //     },
  //   ];
  const config: any = {
    data,
    xField: 'transferSize',
    yField: 'name',
    seriesField: 'name',

    barWidthRatio: 0.8,
    minBarWidth: 20,
    maxBarWidth: 20,
    tooltip: {
      title: '资源',
      fields: ['transferSize', 'name'],
      customContent: (title, data) => {
        return `<ul class='g2-tooltip-list'>
        <li class='g2-tooltip-list-item'>${data[0]?.title}: ${data[0]?.value/1000}kb</li>
        <li class='g2-tooltip-list-item'>${data[1]?.title}: ${data[1]?.data.name}</li>
        </ul>`;
      }
      // formatter: (datum: any) => {
      //   console.log('datum', datum)
      //   return[
      //     { name: '大小', value: datum.transferSize/1000 + 'kb' },
      //     { name: '大小', value: datum.transferSize/1000 + 'kb' },
      //   ];
      // },
    },
    legend: {
      position: 'top-left',
    },
    meta: {
      name: {
        formatter: (data: any) => {
          // return 'ssss'
          return data
          // .replace('http://','')
          // .replace('https://','')
          .substring(0,30)+'...'
        }
          ,
        alias: '名称',
      },
      // transferSize: {
      //   alias: '大小',
      // },
    },
  };
  return <Card >
    <Radio.Group style={{marginBottom:12}} size='small' onChange={(e) => {
      // setValue(e.target.value);
      // @ts-ignore
      run({ value: e.target.value });
    }} defaultValue='all' buttonStyle="solid">
      <Radio.Button value="all">全部</Radio.Button>
      <Radio.Button value="script">Javascript</Radio.Button>
      <Radio.Button value="img">Image</Radio.Button>
      <Radio.Button value="css">CSS</Radio.Button>
    </Radio.Group>
    <Bar loading={loading} {...config} />
  </Card>;
}
export default App